<template>
  <tooltip v-if="tips !== ''">
    <template slot="title">{{ tips }}</template>
    <avatar :size="avatarSize" :src="src" />
  </tooltip>
  <avatar v-else :size="avatarSize" :src="src" />
</template>

<script>
import Avatar from 'ant-design-vue/es/avatar'
import Tooltip from 'ant-design-vue/es/tooltip'

export default {
  name: 'AvatarItem',
  components: {
    Avatar,
    Tooltip
  },
  props: {
    tips: {
      type: String,
      default: '',
      required: false
    },
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      size: this.$parent.size
    }
  },
  computed: {
    avatarSize() {
      return (this.size !== 'mini' && this.size) || 20
    }
  },
  watch: {
    '$parent.size'(val) {
      this.size = val
    }
  }
}
</script>
